import React from 'react';
import { View, Text, StyleSheet, Animated, StyleProp, ViewStyle } from 'react-native';
import { CommonStyle } from '../common/commonStyle.ts';

interface ProgressBarProps {
  totalValue: number;
  progressValue: number;
  height?: number;
  backgroundColor?: string;
  progressColor?: string;
  showPercentage?: boolean;
  customStyles?: StyleProp<ViewStyle>;
}

const ProgressBar: React.FC<ProgressBarProps> = ({ totalValue, progressValue, height = 20, customStyles, backgroundColor = '#e0e0e0', progressColor = CommonStyle.mainColor, showPercentage = true }) => {
  const progressPercentage = Math.min((progressValue / totalValue) * 100, 100);

  const animatedValue = new Animated.Value(progressPercentage);

  Animated.timing(animatedValue, {
    toValue: progressPercentage,
    duration: 500,
    useNativeDriver: false,
  }).start();

  const animatedWidth = animatedValue.interpolate({
    inputRange: [0, 100],
    outputRange: ['0%', '100%'],
  });

  return (
    <View style={[styles.container, { height, backgroundColor }, customStyles]}>
      <Animated.View style={[styles.progressBar, { width: animatedWidth, backgroundColor: progressColor }]} />
      {showPercentage && <Text style={styles.percentageText}>{`${progressPercentage.toFixed(1)}%`}</Text>}
    </View>
  );
};

const styles = StyleSheet.create({
  container: { width: '100%', borderRadius: 10, overflow: 'hidden', justifyContent: 'center' },
  progressBar: { height: '100%', borderRadius: 10 },
  percentageText: { position: 'absolute', alignSelf: 'center', color: 'white', fontWeight: 'bold' },
});

export default ProgressBar;
